<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/boot.js"></script>
    <style>
        .roletpl {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="formcontainer">
            <form class="layui-form layui-form-pane" id="editform" lay-filter="editform">
                <div class="layui-row">
                    <div class="layui-col-xs12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">上级菜单</label>
                            <div class="layui-input-block">
                                <input type="text" name="parent_menu_code" id="parent_menu_code" autocomplete="off" class="layui-input" value="" lay-filter="parent_menu_code" disabled>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">菜单名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="menu_name" autocomplete="off" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">菜单编号</label>
                            <div class="layui-input-block">
                                <input type="text" name="menu_code" autocomplete="off" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-collapse" lay-filter="role">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">部门授权</h2>
                        <div class="layui-colla-content layui-show" id="deptview">
                            <div>
                                <div>
                                    <button class="layui-btn layui-btn-sm" type="button" onclick="SetDeptSetting()">设置</button>
                                    <button class="layui-btn  layui-btn-sm layui-btn-danger" type="button" onclick="ResetDeptSetting()">重置</button>
                                </div>
                                <div style="margin-top: 10px;">
                                    <span id="deptName" style="margin-top: 10px;"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-collapse" lay-filter="role">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">用户授权</h2>
                        <div class="layui-colla-content layui-show" id="userview">
                            <div>
                                <div>
                                    <button class="layui-btn layui-btn-sm" type="button" onclick="SetUserSetting()">设置</button>
                                    <button class="layui-btn layui-btn-sm  layui-btn-danger" type="button" onclick="ResetUserSetting()">重置</button>
                                </div>
                                <div style="margin-top: 10px;">
                                    <span id="userName" style="margin-top: 10px;"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-collapse" lay-filter="role">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">角色授权</h2>
                        <div class="layui-colla-content layui-show" id="roleview">

                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div id="opcontainer">
            <button class="layui-btn" onclick="HandleSave()">确认</button>
            <button class="layui-btn layui-btn-primary" onclick="HandleClose()">关闭</button>
        </div>
    </div>
</body>
<script type="text/html" id="roletpl">
    <div class="roletpl">
        {{# layui.each(d, function(index, item){ }}
            {{# if(item.regist){ }}
                <input type="checkbox" lay-filter="rolesetting" role_id={{ item.row_id }} lay-skin="primary" checked title={{item.role_name}} />
                {{# } else { }}
                    <input type="checkbox" lay-filter="rolesetting" role_id={{ item.row_id }} lay-skin="primary" title={{item.role_name}} />
                    {{# } }}
                        {{# }); }}
    </div>
</script>
<script>
    var FormDetail = null;
    var deptSettingList = [];
    var deptSettingNameList = [];
    var userSettingList = [];
    var userSettingNameList = [];
    $(function() {
        LoadDetail();
        BindSetting();
    })

    function LoadDetail() {
        var param = {
            row_id: GetUrlParam("row_id")
        }
        SetForm("editform", "system/setting/menu/detail", param, function(data) {
            FormDetail = data;
            BindSelectTree("parent_menu_code", "system/setting/menu/tree", {}, FormDetail.parent_menu_code)
        })

    }

    function BindSetting() {
        var param = {
            menu_id: GetUrlParam("row_id")
        }
        HttpPost(JSON.stringify(param), 'system/setting/menusetting/getMenuSetting', function(result) {
            if (result.code == 0) {
                var getTpl = roletpl.innerHTML,
                    view = document.getElementById('roleview');
                layui.laytpl(getTpl).render(result.data.roleSettingList, function(html) {
                    view.innerHTML = html;
                    layui.form.render();
                    deptSettingList = result.data.deptSettingList;
                    deptSettingNameList = result.data.deptSettingNameList;
                    userSettingList = result.data.userSettingList;
                    userSettingNameList = result.data.userSettingNameList;
                    RenderSetting();
                });
            }
        })
    }

    function RenderSetting() {
        var deptName = "";
        for (var i = 0; i < deptSettingNameList.length; i++) {
            var element = deptSettingNameList[i]
            deptName += element + "、"
        }
        $("#deptName").text(deptName);
        var userName = "";
        for (var i = 0; i < userSettingNameList.length; i++) {
            var element = userSettingNameList[i]
            userName += element + "、"
        }
        $("#userName").text(userName);
    }

    function HandleSave() {
        var roleSettingList = [];
        $("input[type='checkbox']").each(function() {
            var role_id = $(this).attr("role_id");
            var regist = $(this).prop('checked');
            if (regist) {
                roleSettingList.push(role_id);
            }
        })
        var param = {
            menu_id: GetUrlParam("row_id"),
            deptSettingList: deptSettingList,
            userSettingList: userSettingList,
            roleSettingList: roleSettingList,
        }
        HttpPost(JSON.stringify(param), 'system/setting/menusetting/updateMenuSetting', function(result) {
            if (result.code == 0) {
                OpenSuccess('设置成功', function(params) {
                    CloseDialog();
                })

            } else {
                OpenFail(result.msg);
            }
        })
    }

    function SetDeptSetting() {
        OpenDialog('选择部门', 'system/dept/dept_select.html', 400, 800, function(data) {
            if (data) {
                deptSettingList = [];
                deptSettingNameList = [];
                data.forEach(element => {
                    deptSettingList.push(element.id)
                    deptSettingNameList.push(element.name);
                });
                RenderSetting();
            }

        }, deptSettingList)
    }

    function ResetDeptSetting(){
        deptSettingList = [];
        deptSettingNameList = [];
        RenderSetting();
    }

    function SetUserSetting() {
        OpenDialog('选择人员', 'system/user/user_select.html', 400, 800, function(data) {
            if (data) {
                userSettingList = [];
                userSettingNameList = [];
                data.forEach(element => {
                    userSettingList.push(element.id)
                    userSettingNameList.push(element.name);
                });
                RenderSetting();
            }
        }, userSettingList)
    }

    function ResetUserSetting(){
        userSettingList = [];
        userSettingNameList = [];
        RenderSetting();
    }

    function HandleClose() {
        CloseDialog();
    }
</script>

</html>